<template>
  <MyCard v-if="showPage" style="height: 100%" :title="mClass.name" back no_scrollbar>
    <div class="info_container">
      <div id="left">
        <div id="info">
          <el-image style="width: 4em" :src="devUrl+mClass.head"></el-image>
          <div class="info_label_item">
            <div class="info_label_title">班级名</div>
            <div class="info_content">{{ mClass.name }}</div>
          </div>
          <div class="info_label_item">
            <div class="info_label_title">创建时间</div>
            <div class="info_content">{{ mysqlTimeToMyDate(mClass.create_time) }}</div>
          </div>
          <div class="info_label_item">
            <div class="info_label_title">班级邀请代码</div>
            <div class="info_content">{{ mClass.code }}</div>
          </div>
        </div>
        <div id="btn_group">
          <el-button type="danger" @click="showDeleteClassDialog" v-if="isManager">解散班级</el-button>
          <el-button type="primary" @click="dialogs.createNotice.show = true" v-if="isManager">创建公告</el-button>
        </div>
        <div id="notice" >
          <ClassNoticeList :notice-list="noticeList" :admin="isManager" @delete="(id:number) => showDeleteNoticeDialog(id)"></ClassNoticeList>
        </div>
      </div>
      <div id="right">
        <div id="right_top">
          <p>成员列表</p>
        </div>
        <div id="user_list">
          <el-popover trigger="click" v-for="(item,index) in userList">
            <el-button size="small" style="margin: 0">查看</el-button>
            <el-button v-if="isManager && (item.id != mUser.id)" size="small" style="margin: 0 0 0 0.5em" type="danger"
                       @click="banUser(index)">踢出
            </el-button>
            <el-button v-if="item.id == mUser.id" size="small" style="margin: 0 0 0 0.5em" type="danger"
                       @click="banUser(index)">退出
            </el-button>
            <template #reference>
              <div id="user_list_item" @click="clickUser(index)">
                <div style="display: flex;flex-direction: row;align-items: center">
                  <el-image style="width: 2em;user-select: none" :src="devUrl+item.head"></el-image>
                  <el-text style="margin: 0 0 0 0.5em;user-select: none">{{ item.name }}</el-text>
                </div>
                <el-text style="color: #ccc" v-if="inAdminList(item.id)">管理员</el-text>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
  </MyCard>

  <el-dialog title="错误" v-model="dialogs.err.show">
    {{ dialogs.err.msg }}
  </el-dialog>

  <el-dialog title="确认" v-model="dialogs.confirm.show">
    {{ dialogs.confirm.msg }}
    <el-button type="primary" @click="dialogs.confirm.fn()">确认</el-button>
    <el-button @click="dialogs.confirm.show=false">取消</el-button>
  </el-dialog>

  <el-dialog title="提示" v-model="dialogs.tip.show">
    {{ dialogs.tip.msg }}
  </el-dialog>

  <el-dialog title="创建公告" v-model="dialogs.createNotice.show">
    <CreateNoticeDialogContent :u_id="mUser.id" :c_id="mClass.id"
                               @suc="async (args:MyDialog) => {
                                 dialogs.tip.msg = args.msg;
                                 dialogs.tip.show = true;
                                 dialogs.createNotice.show = false;
                                 await initNoticeList()
                               }" @err="(args:MyDialog) =>{
                                 dialogs.err.msg = args.msg;
                                 dialogs.err.show;
                                 dialogs.createNotice.show = false;
                               } "></CreateNoticeDialogContent>
  </el-dialog>

  <el-dialog title="删除班级" @close="dialogs.deleteClass.close" v-model="dialogs.deleteClass.show">
    {{dialogs.deleteClass.msg}}
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {PageStore, UserStore} from "../../../store/store";
import {Class, ClassNotice, MyDialog, User} from "../../../types/mytypes";
import MyCard from "../../../components/MyCard.vue";
import {ClassRequest,ClassNoticeRequest} from "../../../request/MyRequset";
import {devUrl} from "../../../request/MyAxios";
import router from "../../../router/router";
import {mysqlTimeToMyDate} from "../../../tools/mysqlTool";
import ClassNoticeList from "../../../components/MyClassInfo/ClassNoticeList.vue";
import CreateNoticeDialogContent from "../../../components/MyClassInfo/CreateNoticeDialogContent.vue";

const mUser: User = UserStore.getUser();
const mClass: Class = PageStore.getNowClass();
let showPage = ref(false)
let userList = ref<User[]>([])
let dialogs = reactive({
  err: {
    msg: "",
    show: false
  },
  confirm: {
    msg: "",
    show: false,
    fn: () => {
    }
  },
  tip: {
    msg: "",
    show: false
  },
  createNotice: {
    msg: "",
    show: false
  },
  deleteClass:{
    msg:"解散班级成功",
    show:false,
    close:()=>{
      router.back()
    }
  }
})


let isManager = ref(false)
let adminList = ref<User[]>([])
let noticeList = ref<ClassNotice[]>([])

onMounted(async () => {
  await initData();
  isManager.value = inAdminList(mUser.id);
  showPage.value = true
})

const initNoticeList = async ()=>{
  let allNoticeRes = await ClassNoticeRequest.getClassAll(mClass.id)
  noticeList.value = allNoticeRes.data
}

const initData = async () => {
  let allUserRes = await ClassRequest.getClassAllUser(mClass.id);
  if (allUserRes.suc) {
    userList.value = allUserRes.data
  } else {
    dialogs.err.msg = allUserRes.message;
    dialogs.err.show = true;
  }
  let allAdminRes = await ClassRequest.getClassAllAdmin(mClass.id)
  adminList.value = allAdminRes.data

  await initNoticeList();
}

const deleteClass = ()=>{
  return async ()=>{
    let res = await ClassRequest.delete(mClass.id);
    if(res.suc){
      dialogs.deleteClass.show = true
    }else{
      dialogs.err.msg = res.message;
      dialogs.err.show = true;
    }
  }
}
const showDeleteClassDialog=()=>{
  dialogs.confirm.fn = deleteClass();
  dialogs.confirm.msg="你确定要解散班级吗？这个操作无法撤回！"
  dialogs.confirm.show = true;
}

const clickUser = async (index: number) => {
  //console.log("clickUser:" + userList[index].name)
}

const inAdminList = (id: number): boolean => {
  for (let i = 0; i < adminList.value.length; i++) {
    if (id == adminList.value[i].id) {
      return true;
    }
  }
  return false;
}

const deleteNotice =  (id:number)=>{
  return async ()=>{
    let delRes = await ClassNoticeRequest.del(id);
    console.log(delRes)
    if(delRes.suc){
      dialogs.confirm.show = false
      dialogs.err.show = false
      dialogs.tip.msg = '删除公告成功';
      dialogs.tip.show = true
      await initNoticeList();
    }else{
      dialogs.err.msg = delRes.message
      dialogs.err.show = true
    }
  }
}

const showDeleteNoticeDialog = (id:number)=>{
  dialogs.confirm.fn = deleteNotice(id)
  dialogs.confirm.msg="确定删除该公告吗？"
  dialogs.confirm.show = true
}

const ban = (index: number) => {
  return async () => {
    let delRes = await ClassRequest.delUser(userList.value[index].id, mClass.id)
    if (delRes.suc) {
      dialogs.confirm.show = false
      dialogs.err.show = false
      dialogs.tip.msg = '踢出该用户成功';
      dialogs.tip.show = true
      await initData();
    } else {
      dialogs.err.msg = delRes.message
      dialogs.err.show = true
    }
  }
}

const exit = () => {
  return async () => {
    let delRes = await ClassRequest.delUser(mUser.id, mClass.id);
    if (delRes.suc) {
      dialogs.confirm.show = false
      dialogs.err.show = false
      dialogs.tip.msg = '退出该班级成功';
      dialogs.tip.show = true
      router.back()
    } else {
      dialogs.err.msg = delRes.message
      dialogs.err.show = true
    }
  }
}

const banUser = async (index: number) => {
  let uList = userList.value
  if (uList[index].id == mUser.id) {
    //console.log(isManager.value)
    //离开班级
    if (isManager.value) {
      dialogs.tip.msg = '您是班级的管理员，无法退出班级';
      dialogs.tip.show = true
    } else {
      dialogs.confirm.msg = "确定要退出该班级吗？"
      dialogs.confirm.fn = exit();
      dialogs.confirm.show = true
    }
  } else {
    //踢出班级
    dialogs.confirm.msg = "确定要踢出" + uList[index].name + "吗？"
    dialogs.confirm.fn = ban(index);
    dialogs.confirm.show = true
  }
}

</script>

<style scoped lang="scss">
.info_container {
  margin-top: 1em;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;


  #left {
    width: 75%;
    //border: 1px #ccc solid;
    height: 100%;
    //padding: 1em;
    box-sizing: border-box;
    //overflow: hidden;
    display: flex;
    flex-direction: column;

    #info {
      width: 100%;
      height: auto;
      border: 1px #ccc solid;
      border-radius: 4px;
      margin-bottom: 0.5em;
      display: flex;
      flex-direction: row;
      align-items: center;

      .info_label_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 0.5em;

        .info_label_title {
          font-weight: bold;
          margin-right: 0.2em;
          color: #222;
        }

        .info_content {
          color: #444;
        }
      }
    }

    #btn_group {
      display: flex;
      flex-direction: row;
      justify-content: end;
    }

    #notice {
      width: 100%;
      height: 100%;
      //border: 1px #ccc solid;
      background-color: #eee;
      border-radius: 4px;
      position: relative;
      margin-top: 0.5em;
      box-sizing: border-box;
      overflow: auto;
      padding: 0.3em 0.3em 4.1em;
    }
  }

  #right {
    width: 25%;
    border: 1px #ccc solid;
    height: 100%;
    display: flex;
    margin-left: 1em;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    border-radius: 4px;

    box-sizing: border-box;
    overflow: hidden;

    #right_top {
      width: 100%;
      //background-color: #ccc;
      height: 2.5em;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px #ccc solid;

      p {
        padding: 0 0 0 0.5em;
        //color: #fff;
      }
    }

    #user_list {
      width: 100%;
      padding: 1em;
      box-sizing: border-box;

      #user_list_item {
        padding: 0.3em 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
      }

      #user_list_item:hover {
        background-color: #f5f5f5;
        cursor: pointer;
      }
    }
  }
}
</style>